import React, { Component } from 'react';
import CommonHeader from './common';
import './css/home.css';
import { Link } from 'react-router-dom';
import $ from 'jquery';
import './config';

import { Layout, message } from 'antd';

const {
  Header,Content,Footer
} = Layout;

class Search extends Component {
    constructor(props){
        super(props);
        this.state = {
            students:[],
            key:this.props.match.params.key
        }
    }

    componentDidMount(){
        this.getdata(this.state.key)
    }

    getdata = () =>{
        let url = global.url;
        let json = {
            key:this.state.key
        }
        $.ajax({
            url: `${url}/search`,
            type : `POST`,
            dataType: "json",    //返回数据的 类型 text|json|html--
            contentType: "application/json;charset=utf-8",
            data:  JSON.stringify(json),
            success : (data) => {
                if(data.code === 200){
                    let studentlist = data.student;
                    this.setState({
                        students:studentlist,
                    });
                }else {
                    message.warning("未找到相关数据",2);
                }
            },
            error:() => {message.error("获取数据失败，请检查网络连接",2);}
        });
    }

    renderStundent = () =>{
        const { students } = this.state;
        let type = [];
        let scholarship = ["无","专业学习类奖学金","科技实践类奖学金","社会公益类奖学金","校园文化类奖学金"];
        if( students[0] !== undefined){
            for(let i = 0;i < students.length;++i){
                let developnemtScore = students[i].tech+students[i].society+students[i].culture;
                type.push(
                    <Link to={`studentinfo/${students[i].id}`} className={ students[i].state?`pass student-card`:` student-card`}>
                    <img src= {students[i].photo} />
                    <ul>
                        <li>{students[i].student_name}</li>
                        <li>{students[i].classname}</li>
                        <li>{students[i].id}</li>
                        <li>基本素质分数：{students[i].basic_score}</li>
                        <li>发展素质分数：{developnemtScore}</li>
                        <li>推荐奖学金种类：<br/>{scholarship[students[i].scholarship_type]}</li>
                        <li>审核状态：{students[i].state ? `已通过` : `未通过`}</li>
                    </ul>
                    <Link to={`/studentinfo/${students[i].id}`}>阅读更多>>></Link>
                </Link>
                )
            }
        }
        return type;
    }

  render() {
    return (
      <div>
        <Layout>
          <Header className="header"><CommonHeader></CommonHeader></Header>
          <Content>
            <div className="container">
                <div className="introduce2">
                    <h1>学生信息展示/审批</h1>
                    <h2></h2>
                </div>
                {this.renderStundent()}
              </div>
          </Content>
          <Footer><div className="copyright"><p>版权所有 © 2019-现在 shijiewubaiqiang.top</p></div></Footer>
        </Layout>
        
      </div>
    );
  }
}

export default Search;
